<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        v-model="channels.perfectNumber"
        placeholder="用户ID"
        style="width: 200px; margin-right: 20px"
        class="filter-item"
      />
      <el-input
        v-model="channels.keyword"
        placeholder="新呢称"
        style="width: 200px; margin-right: 20px"
        class="filter-item"
      />
      <el-select
        v-model="channels.status"
        placeholder="状态"
        clearable
        class="filter-item"
        style="width: 200px; margin-right: 20px"
      >
        <el-option
          v-for="item in calendarTypeOptions"
          :key="item.id"
          :label="item.nickname"
          :value="item.id"
        />
      </el-select>
      <el-select
        v-model="channels.autoStatus"
        placeholder="机审结果"
        clearable
        class="filter-item"
        style="width: 200px; margin-right: 20px"
      >
        <el-option
          v-for="item in calendarTypeOptions2"
          :key="item.id"
          :label="item.nickname"
          :value="item.id"
        />
      </el-select>

      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        style="margin-left: 20px"
        @click="
          handleFilter();
          channels.page = 1;
        "
      >
        搜索
      </el-button>
    </div>

    <div class="batch">
      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-close"
        @click="toggleSelection(2)"
      >
        批量拒绝
      </el-button>
      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-check"
        @click="toggleSelection(1)"
      >
        批量通过
      </el-button>
    </div>

    <el-table
      ref="multipleTable"
      :data="list"
      stripe
      style="width: 1200px"
      border
      @selection-change="handleSelectionChange"
      :row-key="getRowKeys"
    >
      <el-table-column
        type="selection"
        width="55"
        align="center"
        :reserve-selection="true"
        :selectable="checkboxInit"
      />
      <el-table-column
        prop="perfect_number"
        label="ID"
        width="100"
        align="center"
      />
      <el-table-column
        prop="nickname"
        label="发布人"
        width="200"
        align="center"
      />
      <el-table-column prop="content.old" label="呢称" align="center" />
      <el-table-column prop="content.new" label="新昵称" align="center" />

      <el-table-column
        prop="add_time"
        label="提交时间"
        align="center"
        width="200"
      />
      <el-table-column prop="auto_status" label="机审结果" align="center">
        <template slot-scope="scope" align="center">
          <span v-if="scope.row.auto_status == '0'">审核中</span>
          <span v-else-if="scope.row.auto_status == '1'">通过</span>
          <span v-else>拒绝</span>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" align="center">
        <template slot-scope="scope" align="center">
          <span v-if="scope.row.status == '0'">审核中</span>
          <span v-else-if="scope.row.status == '1'">通过</span>
          <span v-else>拒绝</span>
        </template>
      </el-table-column>

      <el-table-column fixed="right" label="操作" width="200" align="center">
        <template slot-scope="scope" align="center">
          <el-button
            :disabled="scope.row.status != '0'"
            type="primary"
            size="small"
            @click="adopt(scope.row.id, '1')"
            >通过
          </el-button>
          <el-button
            :disabled="scope.row.status == '2'"
            type="button"
            size="small"
            @click="adopt(scope.row.id, '2')"
            >拒绝
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="channels.page"
      :limit.sync="channels.pageSize"
      @pagination="handleFilter"
    />
  </div>
</template>
<script>
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
import { encryption2 } from "@/api/index";
export default {
  name: "ComplexTable",
  components: {
    Pagination,
  },
  data() {
    return {
      channels: {
        perfectNumber: "", // 用户ID
        keyword: "", // 昵称
        status: 0, // 审核状态
        autoStatus: "", // 机审状态
        page: 1,
        pageSize: 10,
      },
      calendarTypeOptions: [
        {
          id: 0,
          nickname: "待审核",
        },
        {
          id: 1,
          nickname: "通过",
        },
        {
          id: 2,
          nickname: "拒绝",
        },
      ],
      calendarTypeOptions2: [
        {
          id: 0,
          nickname: "待审核",
        },
        {
          id: 1,
          nickname: "通过",
        },
        {
          id: 2,
          nickname: "拒绝",
        },
      ],
      total: 0,
      list: [],
      multipleSelection: [], //批量对象
      status: 0,
    };
  },
  created() {
    this.handleFilter();
  },
  beforeRouteEnter(to, from, next) {
    if (from.name == "UserQuery") {
      next((vm) => {
        // 通过 `vm` 访问组件实例
        vm.functionA();
      });
    } else {
      next();
    }
  },
  methods: {
    functionA() {
      this.channels.status = 0;
      this.handleFilter();
    },
    checkboxInit(row, index) {
      if (row.status != "0") {
        return false;
      } else {
        return true;
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val.map((item) => {
        return item.id;
      });
      this.multipleSelection = this.multipleSelection.join(",");
    },
    getRowKeys(row) {
      return row.id;
    },

    toggleSelection(rows) {
      if (this.multipleSelection.length) {
        //有选中
        this.adopt(this.multipleSelection, rows);
      } else {
        //没有选中
        if (rows == "1") {
          this.list.forEach((row) => {
            if (row.status == "0") {
              this.$refs.multipleTable.toggleRowSelection(row, true);
            }
          });
          if (this.multipleSelection.length) {
            this.adopt(this.multipleSelection, rows);
          } else {
            this.$message({
              message: `没有更多选择`,
              type: "success",
            });
          }
        } else {
          this.list.forEach((row) => {
            if (row.status == "0") {
              this.$refs.multipleTable.toggleRowSelection(row, true);
            }
          });
          if (this.multipleSelection.length) {
            this.adopt(this.multipleSelection, rows);
          } else {
            this.$message({
              message: `没有更多选择`,
              type: "success",
            });
          }
        }
      }
    },
    adopt(id, status) {
      const arys = {
        ids: id,
        status: status,
      };
      const url = "/audit/nicknameAudit";
      encryption2(arys, url).then((res) => {
        if (res.data.status === 0) {
          this.multipleSelection = "";
          this.$message({
            message: res.data.text,
            type: "success",
          });
          this.handleFilter();
        } else {
          this.$message({
            message: res.data.text,
            type: "error",
          });
        }
        this.$refs.multipleTable.clearSelection();
      });
    },

    // 查询
    handleFilter() {
      const arys = {
        perfectNumber: this.channels.perfectNumber, // 用户ID
        keyword: this.channels.keyword, // 昵称
        status: this.channels.status, // 审核状态
        autoStatus: this.channels.autoStatus, // 机审状态
        page: this.channels.page,
        pageSize: this.channels.pageSize,
      };
      const url = "/audit/nicknameList";
      encryption2(arys, url).then((res) => {
        if (res.data.status === 0) {
          this.list = res.data.result.list;
          this.total = res.data.result.total;
        } else {
          this.$message({
            message: res.data.text,
            type: "error",
          });
        }
      });
    },
  },
};
</script>
<style scoped>
.filter-container .filter-item {
  margin-bottom: 0;
}

.el-table--border {
  border-right: 1px solid #dfe6ec;
}

.el-alert {
  width: 1200px;
}

.filter-container {
  margin-top: 20px;
}

.batch {
  width: 1200px;
  margin: 10px 0;
  display: flex;
  flex-direction: row-reverse;
}

.batch .filter-item {
  margin-left: 20px;
}
</style>